Transcrição
Vamos aplicar uma série de boas práticas. O Webpack, no passado, colocava cada módulo em uma closure e realizava um processo bem trabalhoso. Porém, é possível diminuir a quantidade de closures durante a criação dos módulos, isso acelera o tipo de processamento e carregamento no navegador.
Vale ressaltar que falamos do tempo no qual os módulos são parseados, executados e processados. Como podemos fazer isso? Nosso escopo é pequeno e por isso, a diferença será quase imperceptível. Mas é uma boa prática adotar essa abordagem na sua aplicação. É o que faremos em modo de produção.
Dentro do if de production, adicionaremos optimize.ModuleConcatenationPlugin() antes do babiliPlugin.
if (process.env.NODE_ENV == 'production') {
plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
plugins.push(new babiliPlugin());
plugins.push(new optimizeCSSAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}));
}Com isso, as alterações serão feitas no módulo, fazendo com que seu processamento ocorra mais rapidamente. Esta é uma novidade introduzida a partir da versão Webpack 3 e que estamos usando na nossa aplicação.
Em seguida, no Terminal, usaremos o comando npm run build-prod. O build de produção será mais demorado dessa vez, no entanto, o bundle.js será gerado já com a otimização.